<template>
	<view class="content">
		<page-head :title="i18n.main.service"></page-head>
		<image src="../../static/tabbar/return.png" mode="" class="page-return" @tap="back"></image>

		<view class="center">
			<view class="prompt">
				<image src="../../static/page/love.png" mode="widthFix" class="pt-img"></image>
				<view class="pt-text">{{i18n.center.servicetext}}</view>
			</view>

			<view class="verified">
				<view class="form" v-for="(li, index) in list" :key="index">
					<view class="form-top">{{li.type}}</view>

					<view class="form-input">
						<view class="title">{{li.way}}</view>
					</view>

					<view class="form-img">
						<image :src="li.qrcode" mode="widthFix" @click="popup(li.qrcode)"></image>
					</view>
				</view>
				
				<view class="" @tap='loding'>
					<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
				</view>
			</view>
		</view>

		<uni-popup :show="showPopup" type="middle" v-on:hidePopup="hidePopup">
			<view class='popup' @tap="shut">
				<image :src="img" mode="widthFix"></image>
			</view>
		</uni-popup>

		<image :src="back_img" mode="" class="back_img" :style="height"></image>
	</view>
</template>

<script>
	import service from '../../service.js';
	import uniPopup from "@/components/uni-popup.vue";
	import mInput from '../../components/m-input.vue';
	import pageHead from '../../components/page-head.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
	var wechat_qrcode_update = 0;
	var alipay_qrcode_update = 0;
	export default {
		computed: {
			i18n() {
				return this.$t('index');
			}
		},
		components: {
			uniLoadMore,
			uniPopup,
			pageHead,
			mInput
		},
		data() {
			return {
				loadingType: 0,
				contentText: uni.getStorageSync('content'),
				back_img: uni.getStorageSync('page'),
				height: uni.getStorageSync('height'),
				user: uni.getStorageSync('user'),
				isHistoryLoading:false,
				scrollAnimation:false,
				showPopup:false,
				title: '',
				list:[],
				pages:1,
				page:0,
				psize:1,
				img: '',
			};
		},
		onShow: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.main.service
			});
			this.contentText.contentdown = this.i18n.tabbar.cilck;
			this.loadHistory();
		},
		methods:{
			back(){
				uni.switchTab({
					url: '/pages/main/user'
				})
			},
			loding(){
				if(this.loadingType == 0){
					this.loadHistory();
				}
			},
			//触发滑动到顶部(加载历史信息记录)
			loadHistory(e){
				if(this.isHistoryLoading){
					return ;
				}
				if(this.page < this.pages){
					this.loadingType = 1;
					var keywords = this.keywords;
					this.isHistoryLoading = true;//参数作为进入请求标识，防止重复请求
					this.scrollAnimation = false;//关闭滑动动画
					//本地模拟请求历史记录效果
					var page = this.page+1;
					var psize = this.psize;
					service.auth(this, service.api.center.service, {
						page: page,
						psize: psize,
					}, function(self, res) {
						if(res.info > 0){
							var list = res.data;
							console.log(list)
							for(let i=0;i<list.length;i++){
								//将数据逐条写入数组
								self.list.push(list[i]);
							}
							self.scrollAnimation = true;//恢复滚动动画
							self.isHistoryLoading = false;
							var pages = Math.ceil(res.info / psize);
							if(pages == 0){
								self.loadingType = 3;
							}else if(pages == 1 || pages == page){
								self.loadingType = 2;
							}else{
								self.loadingType = 0;
							}
							self.pages = pages;
							self.page = page;
						}else{
							self.loadingType = 2;
						}
					});
				}else{
					this.loadingType = 2;
				}
			},
			//统一的关闭popup方法
			hidePopup: function() {
				this.showPopup = false;
			},
			shut() {
				this.showPopup = false
			},
			popup(img) {
				this.img = img;
				this.showPopup = true;
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0;
		background: #F2F2F2;
	}

	.center {
		z-index: 30;
		margin: 30upx;
		width: calc(100% - 60upx);
	}
	.prompt{
		z-index: 50;
		position: relative;
		width: 86%;
		margin: 0 7%;
		padding: 25upx 0;
		line-height: 30upx;
		border-radius: 40upx;
		background: rgba(255,255,255,.3);
	}
	.pt-img{
		float: left;
		width: 80upx;
		height: 80upx;
		margin: -25upx;
	}
	.pt-text{
		color: #6D6D72;
		font-size: 28upx;
		padding-left: 80upx;
		padding-right: 10upx;
	}

	.verified {
		padding: 40upx 0;
		border-radius: 20upx;
		margin: 30upx 0 60upx;
		background: rgba(255, 255, 255, .7);
	}

	.reminder {
		color: red;
		margin: 0 40upx;
		padding: 10upx 0;
		font-size: 26upx;
		text-align: center;
		line-height: 30upx;
		background: #ffe9e9;
	}

	.form{
		width: 100%;
		height: 560upx;
		margin-top: 40upx;
		border-top: 2upx solid #BBBBBB;
	}

	.form-top {
		width: 400upx;
		color: #999999;
		font-size: 32upx;
		line-height: 60upx;
		text-align: center;
		background: #f3c7e8;
		margin: -30upx calc(50% - 200upx) 0;
	}

	.title{
		height: 100upx;
		color: #6D6D72;
		font-size: 50upx;
		text-align: center;
		line-height: 100upx;
	}

	.form-img {
		width: 300upx;
		margin: 0 auto;
		border: 4upx solid #871de8;
	}

	.form-img image {
		width: 300upx;
		height: 300upx;
	}

	.popup image {
		width: 100%;
	}

	.back_img {
		margin: 0;
	}
</style>
